<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
<h2>Hello World!</h2>

<form action="page/consurme" method="post"
      enctype="application/x-www-form-urlencoded">
    <button>表单提交</button>
</form>

<form action="page/consurme" method="post"
      enctype="multipart/form-data">
    <button>文件上传</button>
</form>

<hr>

<div id="app">
<form action="p1" method="post">
    姓名：<input type="text" name="name" v-model="person.name"><br>
    年龄：<input type="number" name="age" v-model="person.age"><br>
    生日：<input type="date" name="birthday" v-model="person.birthday"><br>
    性别：<input type="radio" name="boy" value="true" v-model="person.boy">男
    <input type="radio" name="boy" value="false" v-model="person.boy">女<br>
    爱好：<input type="checkbox" name="like" value="乒乓球" v-model="person.like">乒乓球
    <input type="checkbox" name="like" value="篮球" v-model="person.like">篮球
    <input type="checkbox" name="like" value="足球" v-model="person.like">足球
    <input type="checkbox" name="like" value="羽毛球" v-model="person.like">羽毛球<br>
    父亲：<input type="text" name="mather.name" v-model="person.mather.name"><br>
    母亲：<input type="text" name="father.name" v-model="person.father.name"><br>
    朋友1：<input type="text" name="friends[0].name"  v-model="person.friends[0].name"><br>
    朋友2：<input type="text" name="friends[1].name" v-model="person.friends[1].name"><br>
    朋友3：<input type="text" name="friends[2].name" v-model="person.friends[2].name"><br>
    <button>提交</button>
    <button @click.prevent="commit">Ajax提交</button>
</form>
</div>

<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            person:{
                name:"",
                age:0,
                boy:null,
                birthday:null,
                like:[],
                mather:{name:""},
                father:{name:""},
                friends:[{name:""},{name:""},{name:""}],
            }
        },
        created() {},
        methods : {
            commit() {
                axios.post('p2',this.person).then(res=>{
                    console.info(res.data)
                })
            }
        }
    })
</script>
</body>
</html>